<template>
  <div id="viewsDataDetails">
    <el-row>
      <el-col :span="23" :offset="1">
        <el-form label-width="100px" label-position="left">
          <el-form-item label="活动名称：">
            <span>{{ activityName }}</span>
          </el-form-item>
          <el-form-item label="时间段：">
            <!-- <span>{{topDetails.startTime}}——{{topDetails.endTime}}</span> -->
            <span>{{ queryTime }}</span>
          </el-form-item>
          <el-form-item label="总邀请人数：">
            <span>{{ registerUserNum + recallUserNum }}</span>
          </el-form-item>
          <el-form-item label="活动奖品：">
            <span>{{ topDetails.activityPrizes }}</span>
          </el-form-item>
          <el-form-item label="数据详情 ：" class="box">
            <div>
              <span>新注册用户数</span>
              <p>
                <span style="color:black;font-size:20px;font-weight:bold">{{
                  registerUserNum
                }}</span
                >人
              </p>
            </div>
            <div>
              <span>入量用户数</span>
              <p>
                <span>{{ ruliangUserNum }}</span
                >人
              </p>
            </div>
            <div>
              <span>老用户召回数</span>
              <p>
                <span>{{ recallUserNum }}</span
                >人
              </p>
            </div>
            <div>
              <span>购买正式课用户数</span>
              <p>
                <span>{{ buyFormalClassUserNum }}</span
                >人
              </p>
            </div>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col style="margin-top:20px">
        <topSearch :formInline="formInline" @toSearch="searchList"></topSearch>
      </el-col>
      <el-col :span="1">
        <el-button
          @click="importBtn"
          type="primary"
          size="medium"
          style="width:100px;height:30px"
          >导出</el-button
        >
      </el-col>
      <el-col :span="24">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="date" label="序号" width="180">
            <template slot-scope="scope">
              {{ scope.$index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="userName" label="用户名" width="180">
          </el-table-column>
          <el-table-column prop="dpAccount" label="大鹏号"> </el-table-column>
          <el-table-column prop="mobile" label="手机号"> </el-table-column>
          <el-table-column prop="inviteNum" label="邀请人数"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <span class="hands" @click="views(scope.row)">查看</span>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-全局组件-->
        <pageCom
          :searchParams="searchParams"
          :total="total"
          @searchList="searchList"
        ></pageCom>
      </el-col>
    </el-row>
    <importDialog
      v-if="importDialogData.isShow"
      :dialog-data="importDialogData"
      @refresh="searchList"
      @showError="showError"
    ></importDialog>
    <!-- 导入失败弹窗 -->
    <errorDialog
      v-if="errorDialogData.isShow"
      :dialog-data="errorDialogData"
      from="downErrorData"
    ></errorDialog>

    <viewDetailsDailog
      :show="show"
      :viewDetailDailog="viewDetailDailog"
    ></viewDetailsDailog>
  </div>
</template>

<script>
import importDialog from '@common/importDialog' // 导入弹窗
import viewDetailsDailog from '@component/markingActive/common/viewDataDetails/viewDetailsDailog'
import topSearch from '@component/markingActive/common/viewDataDetails/topSearch'
import {
  invitedDetails,
  invitedList,
  viewData,
  exportInvitedData,
  invitedActiveDetail
} from '@/api/activeList/index'

export default {
  name: 'viewDataDetails',
  data() {
    return {
      activityName: '',
      topDetails: {},
      queryTime: '',
      viewDetailDailog: {},
      formInline: {
        dpAccount: ''
      },
      registerUserNum: '',
      buyFormalClassUserNum: '',
      recallUserNum: '',
      ruliangUserNum: '',
      activeId: '',
      // 导入失败弹框的数据
      errorDialogData: {
        isShow: false, // 控制弹框显示
        warningText: '' // 参数
      },
      importDialogData: {
        title: '导出用户',
        isShow: false, // 控制弹框显示
        params: '' // 参数
      },
      searchParams: {
        pageNum: 1,
        pageSize: 10
      },
      total: 0,
      show: {
        isshow: false
      },
      tableData: []
    }
  },
  components: {
    topSearch,
    viewDetailsDailog,
    importDialog
  },
  created() {
    this.activeId = this.$route.query.id
    this.queryTime = this.$route.query.time
    this.activityName = this.$route.query.name
  },
  mounted() {
    this.getBoxDetails()
    this.searchList()
    this.handleInvitedActiveDetail()
  },
  methods: {
    handleInvitedActiveDetail() {
      let obj = {}
      invitedActiveDetail(
        this.activeId,
        obj,
        (res) => {
          this.topDetails = res
        },
        (err) => {}
      )
    },
    searchList() {
      let obj = {
        ...this.searchParams,
        ...this.formInline
      }
      invitedList(
        this.activeId,
        obj,
        (res) => {
          this.tableData = res.rows
          this.total = res.total
        },
        (err) => {}
      )
    },
    getBoxDetails() {
      let _this = this
      invitedDetails(
        this.activeId,
        {},
        (res) => {
          _this.buyFormalClassUserNum = res.buyFormalClassUserNum
          _this.recallUserNum = res.recallUserNum
          _this.registerUserNum = res.registerUserNum
          _this.ruliangUserNum = res.ruliangUserNum
        },
        (err) => {}
      )
    },
    /* 导入失败弹窗 */
    showError(text) {
      this.errorDialogData.isShow = true // 显示导入失败弹框
      this.errorDialogData.warningText = text // 显示导入失败弹框
    },
    // 导入
    importBtn() {
      let obj = {
        ...this.formInline,
        ...this.searchParams
      }
      this.downFile(
        'get',
        exportInvitedData(this.activeId),
        obj,
        '导出名单',
        '',
        () => {},
        () => {}
      )
    },
    views(val) {
      let _this = this
      let obj = {}
      obj.dpAccount = val.dpAccount
      viewData(
        this.activeId,
        obj,
        (res) => {
          let obj = {}
          obj.userName = val.userName
          obj.inviteNum = val.inviteNum
          obj.rows = res
          obj.time = _this.queryTime
          _this.viewDetailDailog = obj
        },
        (err) => {}
      )
      this.show.isshow = true
    }
  }
}
</script>

<style lang="less" scoped>
.hands {
  color: #02a7f0;
  cursor: pointer;
}
.row_end {
  display: flex;
  justify-content: center;
  align-items: flex-end;
}
.row_center {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.row_space {
  display: flex !important;
  justify-content: space-around;
  align-items: center;
}
#viewsDataDetails {
  .box {
    > :deep(.el-form-item__content) {
      &:extend(.row_space);
      > div {
        width: 15%;
        height: 80px;
        // background: blue;
        border-radius: 10px;
        border: 1px solid black;
        &:extend(.row_center);
        > span {
          padding-top: 10px;
        }
        // > p:nth-child(1) {
        //   border:1px solid black;
        //   &:extend(.row_end);
        // }
        > p {
          // border:1px solid black;
          > span {
            font-size: 20px;
            font-weight: bold;
          }
        }
      }
    }
  }
}
</style>
